<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>随机</title>

        <style type="text/css">
            .wrapper {
                position: absolute ;
                left: 50% ;
                top : 50% ;
                width: 600px ;
                margin-left: -300px ;
                height:300px ;
                margin-top : -300px ;
                background-color: #1e9fff ;
                user-select: none ;
            }

            h3 { height: 100px ; text-align: center ; font-size: 80px ; }
            h3:first-child { margin-top: 50px ; margin-bottom: 0 ;  }
            h3:last-child { margin-top: 0 ; }
        </style>

    </head>
    <body>

        <div class="wrapper">
            <h3>第一组</h3>
            <h3>张君宝</h3>
        </div>

        <script type="text/javascript" >
            ( function(){

                // 获取 .wrapper 元素
                let w = document.querySelector( ".wrapper" );

                // 在 JavaScript 中可以通过 [ ] 形式来声明数组
                let array = [
                                    [ "张君宝" , "张三丰" ] ,
                                    [ "宋远桥" , "张翠山" ] ,
                                    [ "张无忌" , "赵敏" ]
                                ] ;

                //  声明函数
                let action = function(){
                    // console.log( "hello" );
                    console.table( array );
                }

                // 为 .wrapper 元素绑定 双击事件 ( dblclick ) 对应的 处理函数 ( 监听器 )
                w.addEventListener( "dblclick" , action , false );

            })();
        </script>

    </body>
</html>